<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增(超)危大工程清单')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>

    <style>

        /* 消除fileinput中上传按钮样式 */
        .fileinput-upload-button {
            display: none !important;
        }

    </style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-inventory-add" name="form-inventory-add">

        <input name="companyId" type="hidden" id="companyId"/>
        <input name="programId" type="hidden" id="programId"/>
        <input name="programName" type="hidden" id="programName"/>

        <div class="form-group">	
            <label class="col-sm-3 control-label">项目名称：</label>
            <div class="col-sm-8">
                <div class="h5" th:text="${programName}"></div>
            </div>
        </div>

        <div class="form-group">	
            <label class="col-sm-3 control-label">项目经理及联系方式：</label>
            <div class="col-sm-8">
                <input id="manTel" name="manTel" class="form-control" type="text" required>
            </div>
        </div>

        <div class="form-group">	
            <label class="col-sm-3 control-label">项目技术负责人及联系方式：</label>
            <div class="col-sm-8">
                <input id="responTel" name="responTel" class="form-control" type="text" required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">（超）危大工程清单模板：</label>
            <div class="col-sm-8">
                <a href="#" onclick="downloadFile()">模板下载</a>
            </div>
        </div>

        <!-- （超）危大工程清单 -->
        <div class="form-group">
            <div style="width: 73%;margin-left: 130px">
                <label class="font-noraml">（超）危大工程清单:</label>
                <div class="file-loading">
                    <input class="file" type="file" id="filePath" multiple data-min-file-count="1" data-theme="fas">
                </div>
            </div>
        </div>

    </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">

        // Initi 初始化数据
        var prefix = ctx + "danManage";
        var companyId = [[${companyId}]];
        var programId = [[${programId}]];
        var programName = [[${programName}]];
        $("#companyId").val(companyId);
        $("#programId").val(programId);
        $("#programName").val(programName);

        function downloadFile(){
            window.location.href = prefix + "/download/resource";
        }

        // 保存按钮
	    function submitHandler() {
            var formData = new FormData();
            if ($('#filePath')[0].files[0] == null) {
                $.modal.alertWarning("请先选择文件路径");
                return false;
            }
            if ($('#filePath')[0].files[1] != null) {
                $.modal.alertWarning("仅支持单文件上传");
                return false;
            }
            if ($("#manTel").val() == null || $("#manTel").val() == '') {
                $.modal.alertWarning("请填写项目经理信息");
                return false;
            }
            if ($("#responTel").val() == null || $("#responTel").val() == '') {
                $.modal.alertWarning("请填写项目技术负责人信息");
                return false;
            }

            formData.append('companyId', companyId);
            formData.append('programId', programId);
            formData.append('manTel', $("#manTel").val());
            formData.append('responTel', $("#responTel").val());
            formData.append('file', $('#filePath')[0].files[0]);

            $.ajax({
                url: prefix + "/saveInventory",
                type: 'post',
                cache: false,       //上传文件不需要缓存
                data: formData,
                processData: false, //data值是FormData对象，不需要对数据进行处理
                contentType: false, //contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
                dataType: "json",
                success: function (result) {
                    $.operate.successCallback(result);
                }
            });
	    }


    </script>
</body>
</html>
